.article
  color: #555
  margin: 0 0 40px 0
  @media mq-mobile
    width: 100% !important
  @media mq-tablet
    width: 100% !important

.article-inner
  @extend $block
  overflow: hidden
  border: 0px solid color-border

.article-inner-night
  @extend $block-night
  overflow: hidden
  border: 0px solid color-border

.article-meta
  clearfix()
  margin: 7px 0 20px
  color: #999
  font-size: .9em

.article-date
  color: #999
  text-align: center
  font-weight: normal

.article-date:hover
  color: color-theme

.article-category
  text-align: center
  line-height: 1em
  color: #ccc
  margin-left: 8px
  &:before
    content: "\2022"

.article-category-link
  display: inline
  margin: 0
  font-weight: normal

.ico-folder:before
  font-family: "FontAwesome"
  content: "\f07c"
  color: #333

.article-category-link:hover
  color: color-theme

.article-header
  h1
    margin: 0 0 3px 0;
    font-size: 20px;
    line-height: 1.2;
    a
      color: #404040;
      text-decoration: none;

.article-title
  text-decoration: none
  font-weight: bold
  color: #555
  line-height: line-height-title
  transition: color 0.2s
  a&:hover
    color: color-theme
    text-decoration: none;

.article-entry
  @extend $base-style
  clearfix()
  color: color-default
  padding: 0
  p, table
    line-height: line-height
    margin: line-height 0
  h1, h2, h3, h4, h5, h6
    font-weight: bold
  h1, h2, h3, h4, h5, h6
    line-height: line-height-title
    margin: line-height-title 0
  a
    color: color-link
    text-decoration: none
    &:hover
      color: color-theme
      text-decoration: none
  ul, ol, dl
    margin-top: line-height
    margin-bottom: line-height
  img, video
    max-width: 100%
    height: auto
    display: block
    margin: auto
  iframe
    border: none
  table
    width: 100%
    border-collapse: collapse
    border-spacing: 0
  th
    font-weight: bold
    border-bottom: 3px solid color-border
    padding-bottom: 0.5em
  td
    border-bottom: 1px solid color-border
    padding: 10px 0
  blockquote
    padding: 0.1px 20px;
    font-size: 1.1em
    margin: 1.4em 0px
    border-left: 0
    background: #f3f5f9
    &:before
      float: left
      font-family: "FontAwesome"
      content: "\f10d"
      margin-left: -0.8em
    &:after
      float: right
      font-family: "FontAwesome"
      content: "\f10e"
      margin-right: -0.8em
      margin-top: -1.5em
    p
      font-size: font-size
    footer
      font-size: font-size
      margin: line-height 0
      font-family: font-sans
      cite
        &:before
          content: "—"
          padding: 0 0.5em
  .pullquote
    background: transparent
    border-left: 0px
    padding: 10px 25px
    margin: 18px 0
    font-style: italic
    text-align: left;
    width: 45%
    margin: 0
    p
      font-family: Georgia,Microsoft JhengHei,"sans serif"
      font-size: 19px
    &:before
      float: left
      font-family: "FontAwesome"
      content: "\f10d"
      margin-left: -0.5em
    &:after
      float: right
      font-family: "FontAwesome"
      content: "\f10e"
      margin-right: -0.5em
      margin-top: -1em
    &.left
      margin-left: 0.5em
      margin-right: 1em
    &.right
      margin-right: 0.5em
      margin-left: 1em
  .caption
    color: color-grey
    display: block
    font-size: 0.9em
    margin-top: 0.5em
    position: relative
    text-align: center
  // http://webdesignerwall.com/tutorials/css-elastic-videos
  .video-container
    position: relative
    padding-top: (9 / 16 * 100)% // 16:9 ratio
    height: 0
    overflow: hidden
    iframe, object, embed
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      margin-top: 0

.article-more-link
  text-align: center

.article-more-link a
  color: color-red
  display: inline-block
  font-size: 0.9em
  line-height: 1em
  text-decoration: none
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  &:hover
    color: color-default
    text-decoration: none

.article-footer
  clearfix()
  font-size: 0.85em
  line-height: line-height
  border-top: 1px solid #e6e6e6
  padding-top: line-height
  margin: 0 article-padding article-padding
  a
    color: color-grey
    text-decoration: none
    &:hover
      color: color-default

.article-tag-list
  display: inline-block
  margin: 0
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;

.ico-tags:before
  font-family: "FontAwesome";
  content: "\f02c"
  color: #333
  margin-left: 20px !important;

.article-tag-list-item
  display: inline-block
  margin-right: 8px

.article-comment-link
  float: right
  &:before
    content: "\f075"
    font-family: font-icon
    padding-right: 8px

.article-share-link
  cursor: pointer
  float: right
  margin-left: 20px
  &:before
    content: "\f064"
    font-family: font-icon
    padding-right: 6px

#article-nav
  clearfix()
  position: relative
  @media mq-normal
    margin: block-margin 0
    &:before
      absolute-center(8px)
      content: ""
      border-radius: 50%
      background: color-border
      box-shadow: 0 1px 2px #fff

.article-nav-link-wrap
  text-decoration: none
  color: color-grey
  box-sizing: border-box
  margin-top: block-margin
  text-align: center
  display: block
  &:hover
    color: color-default
  @media mq-normal
    width: 50%
    margin-top: 0

#article-nav-newer
  @media mq-normal
    float: left
    text-align: right
    padding-right: 20px

#article-nav-older
  @media mq-normal
    float: right
    text-align: left
    padding-left: 20px

.article-nav-caption
  text-transform: uppercase
  letter-spacing: 2px
  color: color-border
  line-height: 1em
  font-weight: bold
  #article-nav-newer &
    margin-right: -2px

.article-nav-title
  font-size: 0.85em
  line-height: line-height
  margin-top: 0.5em

.article-share-box
  position: absolute
  display: none
  background: #fff
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
  border-radius: 3px
  margin-left: -145px
  overflow: hidden
  z-index: 1
  &.on
    display: block

.article-share-input
  width: 100%
  background: none
  box-sizing: border-box
  font: 14px font-sans
  padding: 0 15px
  color: color-default
  outline: none
  border: 1px solid color-border
  border-radius: 3px 3px 0 0
  height: 36px
  line-height: 36px

.article-share-links
  clearfix()
  background: color-background

$article-share-link
  width: 50px
  height: 36px
  display: block
  float: left
  position: relative
  color: #999
  &:before
    font-size: 20px
    font-family: font-icon
    absolute-center(@font-size)
    text-align: center
  &:hover
    color: #fff

.article-share-twitter
  @extend $article-share-link
  &:before
    content: "\f099"
  &:hover
    background: color-twitter

.article-share-facebook
  @extend $article-share-link
  &:before
    content: "\f09a"
  &:hover
    background: color-facebook

.article-share-pinterest
  @extend $article-share-link
  &:before
    content: "\f0d2"
  &:hover
    background: color-pinterest

.article-share-google
  @extend $article-share-link
  &:before
    content: "\f0d5"
  &:hover
    background: color-google

.article-gallery
  background: transparent
  position: relative
  margin-bottom: 40px

.article-gallery-photos
  position: relative
  overflow: hidden

.article-gallery-img
  display: none
  max-width: 100%
  &:first-child
    display: block
  &.loaded
    position: absolute
    display: block
  img
    display: block
    max-width: 100%
    margin: 0 auto
/*
$article-gallery-ctrl
  position: absolute
  top: 0
  height: 100%
  width: 60px
  color: #fff
  opacity: 0.3
  transition: opacity 0.2s
  cursor: pointer
  &:hover
    opacity: 0.8
  &:before
    font-size: 30px
    font-family: font-icon
    position: absolute
    top: 50%
    margin-top: @font-size * -0.5

.article-gallery-prev
  @extend $article-gallery-ctrl
  left: 0
  &:before
    content: "\f053"
    left: 15px

.article-gallery-next
  @extend $article-gallery-ctrl
  right: 0
  &:before
    content: "\f054"
    right: 15px*/


/*toc*/
.toc-article
  position: absolute
  border-left: rgba(88,88,88,0.1) 1px solid
  padding 1em 1em 0 1em
  margin-left: 1em

.toc-title
  font-size 120%
  &:before
    font-family: "FontAwesome"
    content: "\f0ca"
    margin-right: .5em

#toc
  width: inherit
  line-height 1em
  font-size 0.9em
  float left
  overflow: hidden
  @media mq-mobile
    display: none
  @media mq-tablet
    display: none

.toc-fixed
  position: fixed;
  top: 30px;
  margin-top: 0;
  max-height: 81%;
  overflow: hidden;
  z-index: 1;

.nav
  padding 0
  margin 1em
  line-height 1.8em
  li
  list-style-type none
    a:hover
      background-color: transparent !important
  .active > a
    color: color-theme

.nav-link
  font-family: "futura-pt", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", Microsoft JhengHei, WenQuanYi Micro Hei, "Microsoft YaHei", sans-serif;
  color: color-link
  padding 1px !important
  &:hover
    color: color-theme

.nav-child 
  margin-left 1.0em